<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
  , initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>

    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
  <script type="text/babel">
    /*

    */
    class Count extends React.Component {
      //构造器
      constructor(props) {
        //初始化状态
        super(props);
        this.state = { count: 0 };
        // console.log("Count-constructor");
      }
      //组件将要挂载的钩子（ UNSAFE_加这个避免过时，为未来铺路）
      UNSAFE_componentWillMount() {
        console.log("componentWillMount");
      }
      //组件挂载完毕的钩子
      componentDidMount() {
        console.log("componentDidMount");
      }
      add = () => {
        //获取原状态
        const { count } = this.state;
        //更新状态
        this.setState({ count: count + 1 });
      };
      force = () => {
        this.forceUpdate();
      };
      //从props得到一个衍生的状态，若state的值在任何时候都取决于props,那么可以使用
      static getDerivedStateFromProps(props, state) {
        console.log("getDerivedStateFromProps", props, state);
        return null;
      }
      //在更新之前获取快照
      getSnapshotBeforeUpdate() {
        console.log("getSnapsShotBeforeUpdate");
        return "111";
      }
      //卸载组件按钮的回调
      unMountCom = () => {
        ReactDOM.unmountComponentAtNode("test");
      };
      //组件将要卸载的钩子
      componentWillUnmount() {
        console.log("componentWillUnmount");
      }
      //组件是否应该更新的阀门
      shouldComponentUpdate() {
        console.log("shouldComponentUpdate");
        return true;
      }
      //组件将要更新
      UNSAFE_componentWillUpdate() {
        console.log("componentWillUpdate");
      }
      //组件更新完毕的钩子
      componentDidUpdate(preProps, preState, snapshotValue) {
        console.log("componentDidUpdate", preProps, preState, snapshotValue);
      }
      render() {
        console.log("count-render");
        const { count } = this.state;
        return (
          <div>
            <h2>当前求和为{count}</h2>
            <button onClick={this.add}>点我加一</button>
            <button onClick={this.unMountCom}>卸载组件</button>
            <button onClick={this.force}>强制跟新按钮</button>
          </div>
        );
      }
      //渲染组件
    }

    ReactDOM.render(<Count count={199} />, document.getElementById("test"));
  </script>
</html>
